<template>
  <el-form ref="refform" :model="form" status-icon :rules="rules" class="leftadd">

    <el-form-item label="名称" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>

    <el-form-item label="描述" prop="description">
      <el-input v-model="form.description"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit('refform')">提交</el-button>
      <el-button @click="open">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    name: 'addRow',
    data () {
      var name = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('不能为空'))
        } else {
          callback()
        }
      }

      var description = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('不能为空'))
        } else {
          callback()
        }
      }
      return {
        form: {
          name: '',
          description: ''
        },
        rules: {
          name: [
            {validator: name, trigger: 'blur'}
          ],
          description: [
            {validator: description, trigger: 'blur'}
          ],
        }
      }
    },
    methods: {
      onSubmit (refform) {
        //$refs是一个引用 校验通过发送请求
        this.$refs[refform].validate((valid) => {
          if (valid) {
            var data = {
              name: this.form.name,
              description: this.form.description
            }

            // console.log(data)
            // this.$message({
            //   message: '恭喜你，添加一条成功消息',
            //   type: 'success'
            // })
            // let timer = setTimeout(() => {
            //   //跳转页面
            //   this.$router.push('/role')
            // }, 2000)
            // // 离开当前页面时销毁定时器
            // this.$once('hook:beforeDestroy', () => {
            //   clearInterval(timer)
            //   timer = null
            // })

            this.$http.postRequest('user/role/role/create', data, '').then(res => {
              if (res.data.code == 200) {
                this.$message({
                  message: '恭喜你，添加一条成功消息',
                  type: 'success'
                })
                let timer = setTimeout(() => {
                  //跳转页面
                  this.$router.push('/role')
                }, 2000)
                // 离开当前页面时销毁定时器
                this.$once('hook:beforeDestroy', () => {
                  clearInterval(timer)
                  timer = null
                })
              } else if (res.data.code == 403) {
                this.$message({
                  message: '没有相关权限！',
                  type: 'success'
                })
                let timer = setTimeout(() => {
                  //跳转页面
                  this.$router.push('/role')
                }, 2000)
                // 离开当前页面时销毁定时器
                this.$once('hook:beforeDestroy', () => {
                  clearInterval(timer)
                  timer = null
                })
              } else {
                this.$message({
                  message: res.data.message,
                  type: 'success'
                })
              }
            }).catch(err => {
              this.$message.info(err)
            })
          }

        }).catch(err => {
          this.$message.info(err)
        })
      },
      open () {
        this.$alert('取消添加信息！！', {
          confirmButtonText: '确定',
        })
        this.$router.push('/role')
      }
    }
  }
</script>

<style scoped>

</style>
